<my-pageheader></my-pageheader>

<mat-card style="margin: 20px 20px 50px 20px">
    <h2 align="center">光性能监测</h2>
    <br><br>

    <div class="row justify-content-center">
        <mat-card style="width: 90%">
            <button mat-raised-button (click)="genTestImage()" [disabled]="sending">
                生成随机测试图像
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;或&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="file" ng2FileSelect [uploader]="fileSelector" accept=".jpg, .jpeg, .png, .gif, image/*" [disabled]="sending" />
            <br>
            <br>
            <div>
                <img style="max-width: 100%" src="{{selectedImgDataUrl}}" alt="">
            </div>
        </mat-card>
    </div>
    <div class="row justify-content-center">
        <mat-card style="width: 90%; margin-top: 20px">
            <p *ngIf="!result && !sending">识别结果</p>
            <p *ngIf="sending">正在计算...</p>
            <mat-spinner *ngIf="sending"></mat-spinner>
            <p style="font-size: 20px" *ngIf="!sending && result">
                &nbsp;&nbsp;波特率:&nbsp;{{baudRate}}&nbsp;&nbsp;&nbsp;信号类型:&nbsp;{{singleType}}
            </p>
        </mat-card>
    </div>
</mat-card>
